@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(row){
    @include clearfix;
}

[class*="aiui-col-"] {
    position: relative; 
    display: block; 
    box-sizing: border-box;
}

.aiui-col-0 {
    display: none;
}

@for $i from 1 through $grid-col-count {
	.aiui-col-xs#{$i}{ 
        float: left;
        width:(1/12*$i*100%) !important;
    } 
}

/* 超小屏幕(手机) */
@media screen and (max-width: 768px) {
    .aiui-hide-xs{display: none!important;}
    .aiui-show-xs-block{display: block!important;}
    .aiui-show-xs-inline{display: inline!important;}
    .aiui-show-xs-inline-block{display: inline-block!important;}
}

/* 小型屏幕(平板) */
@media screen and (min-width: 768px) {
    .aiui-hide-sm{display: none!important;}
    .aiui-show-sm-block{display: block!important;}
    .aiui-show-sm-inline{display: inline!important;}
    .aiui-show-sm-inline-block{display: inline-block!important;}
    @for $i from 1 through $grid-col-count {
        .aiui-col-sm#{$i}{ 
            float: left;
            width:(1/12*$i*100%) !important;
        } 
    }
}
/* 中型屏幕(桌面) */
@media screen and (min-width: 992px) {
    .aiui-container{width: 970px;}
    .aiui-hide-md{display: none!important;}
    .aiui-show-md-block{display: block!important;}
    .aiui-show-md-inline{display: inline!important;}
    .aiui-show-md-inline-block{display: inline-block!important;}
    @for $i from 1 through $grid-col-count {
        .aiui-col-md#{$i}{ 
            float: left;
            width:(1/12*$i*100%) !important;
        } 
    }
}

/* 大型屏幕(桌面) */
@media screen and (min-width: 1200px) {
    .aiui-container{width: 11600px;}
    .aiui-hide-lg{display: none!important;}
    .aiui-show-lg-block{display: block!important;}
    .aiui-show-lg-inline{display: inline!important;}
    .aiui-show-lg-inline-block{display: inline-block!important;}
    @for $i from 1 through $grid-col-count {
        .aiui-col-lg#{$i}{ 
            float: left;
            width:(1/12*$i*100%) !important;
        } 
    }
}